<template>
  <view>
    <view class="l-cr-home">
      <view>
        <image :src="ditem.src" mode="aspectFill"></image>
        <i class="iconfont icon-xihuan"></i>
      </view>

      <view>
        <text>{{ ditem.name }}</text>
        <text>{{ ditem.studio }}</text>
        <view>
          <i
            v-for="index in 5"
            :key="index"
            :class="[
              { 'l-cr-h': index <= ditem.num },
              'iconfont',
              'icon-shoucangxuanzhong',
            ]"
          ></i>
          <text>{{ ditem.num }}</text>
        </view>
        <text class="ddd-tag">{{ ditem.tag }}</text>
        <view>
          <i class="iconfont icon-shijian"></i>
          <text class="ddd-time">
            {{ ditem.time }}
          </text>
        </view>
      </view>
    </view>
    <view class="ddd-x"> </view>
  </view>
</template>


<script>
export default {
  data() {
    return {};
  },
  methods: {},
  components: {},
  //   传入的参数
  props: {
    // item: 对象
    ditem: {
      type: Object,
      default: {
        name: "",
        studio: "",
        src: "",
        num: "",
        tag: "",
        time: "",
      },
    },
  },
};
</script>

<style lang="scss">
.l-cr-h {
  color: #ffe371 !important;
}

.ddd-x {
  border: #dee2ee solid 1rpx;
  //   height: 1rpx;
  display: flex;
  width: 60%;
  margin-top: 13px;
  margin-left: 30%;
}

.l-cr-home {
  display: flex;
  flex-direction: row;
  padding: 20px 0 0 20px;

  > view {
    position: relative;
    margin-right: 25px;
    > i:nth-child(2) {
      position: absolute;
      top: 10px;
      right: 10px;
      padding: 8px 12px;
      background: rgba(255, 255, 255, 0.19);
      border-radius: 40px;
      color: white;
    }
    > image {
      width: 118px;
      height: 144px;
      border-radius: 20px;
      box-sizing: border-box;
    }
  }

  > view:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    text:nth-child(1),
    text:nth-child(2) {
      font-size: 16px;
      line-height: 23px;
      color: #1c2238;
    }

    text:nth-child(2) {
      font-size: 14px;
      line-height: 20px;
    }
  }

  i[class*="icon-shoucangxuanzhong"] {
    color: #e5e5e5;
    margin-right: 6px;
  }
  i[class*="icon-shijian"] {
    color: #d6d6d6;
    margin-right: 8px;
  }
  .ddd-tag {
    // box-sizing: border-box;
    padding: 4px 12px;
    color: #616161;
    border-radius: 5px;
    align-items: center;
    text-align: center;
    justify-content: center;
    width: 20px !important;
    display: flex;
    width: inherit;
    font-size: 10px;
    line-height: 14px;
    border: #616161 1px solid;
  }
  .ddd-time {
    font-size: 15px !important;
    line-height: 17px !important;
  }
}
</style>